<template>
  <el-card class="box-card">
    <el-row v-show="!cardUid" :gutter="20">
      <el-col :span="12">
        <div class="member-item">会员名称：{{ memberInfo ? memberInfo.nickName : '' }}</div>
      </el-col>
      <el-col :span="12">
        <div class="member-item">电话号码：{{ memberInfo ? memberInfo.phone : '' }}</div>
      </el-col>
      <el-col :span="12">
        <div class="member-item">当前积分：{{ memberInfo ? memberInfo.totalPoints : '' }}</div>
      </el-col>
      <el-col :span="12">
        <div class="member-item">最近消费：{{ memberInfo ? formatDate(memberInfo.latestConsumptionDate) : '' }}</div>
      </el-col>
    </el-row>
    <el-row v-show="cardUid" :gutter="20">
      <el-col :span="12">
        <div class="member-item">卡号：{{ cardInfo ? cardInfo.cardNo : '' }}</div>
      </el-col>
      <el-col :span="12">
        <div class="member-item">余额：{{ cardInfo ? cardInfo.balance : '' }} 元
          {{ cardInfo ? cardInfo.carNumber : '' }}
        </div>
      </el-col>
      <el-col :span="12">
        <div class="member-item">名称： {{ cardInfo ? cardInfo.username : '' }}</div>
      </el-col>
      <el-col :span="12">
        <div class="member-item">油品：{{ cardInfo ? cardInfo.usableFuelNames : '' }}</div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import {mapGetters} from 'vuex'
import moment from 'moment'

export default {
  name: 'CartRightMemberInfo',
  computed: {
    ...mapGetters([
      'stationId',
      'operator',
      'memberInfo',
      'cardUid',
      'cardInfo'
    ])
  },
  methods: {
    formatDate (time) {
      return moment(time).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style scoped>
.member-item {
  font-size: 1rem;
  font-weight: bold;
  color: #999999;
  padding: 5px;
  text-align: left;
}
</style>
<style>
.box-card .el-card__body {
  padding: 5px !important;
}
</style>
